import Todolist from "./components/Todolist";
import AntdDemo from "./components/AntdDemo";
import Main from "./pages/Main";
import PrivateRoute from "./components/PrivateRoute";
import { Routes, Route, Link } from 'react-router-dom';
import Login from "./pages/Login";

const App = () => {
    return (
        <div className="App">
            <nav>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/antd">Antd</Link></li>
                    <li><Link to="/main">Main</Link></li>
                </ul>
            </nav>

            <div className="content" style={{display: 'flex'}}>
                <div className="left" style={{width: '200px', backgroundColor: 'red'}}>
                    left
                </div>
                <div className="right">
                    <Routes>
                        <Route path="/" element={<Todolist />} />
                        <Route path="/login" element={<Login />} />
                        <Route path="/antd/*" element={
                            <PrivateRoute>
                                <AntdDemo />
                            </PrivateRoute>
                        } />
                        <Route path="/main" element={
                            <PrivateRoute>
                                <Main title="main" data={['a', 'b', 'c']} />
                            </PrivateRoute>
                        } />
                    </Routes>
                </div>
            </div>
        </div>
    );
}

export default App;
